<template>
  <div class="personal-center-container">
    <el-row :gutter="20">
      <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div class="personal-center-user-info">
            <div class="text-center">
              <userAvatar :user="user" />
            </div>
            <div class="personal-center-user-info-full-name">
              {{ user.userName }}
            </div>
            <div class="personal-center-user-info-description">
              {{ roleGroup }}
            </div>
            <ul class="personal-center-user-info-list">
              <li>
                <vab-icon icon="user-3-line" />
                {{ user.nickName }}
              </li>
              <li>
                <vab-icon icon="phone" />
                {{ user.phonenumber }}
              </li>
              <li>
                <vab-icon icon="date" />
                {{ user.createTime }}
              </li>
              <li>
                <vab-icon
                  :icon="user.sex === '1' ? 'women-line' : 'men-line'"
                />
                {{ user.sex === '1' ? '女' : '男' }}
              </li>
              <li>
                <vab-icon icon="community-line" />
                <span v-if="user.dept">
                  {{ user.dept.deptName }} / {{ postGroup }}
                </span>
              </li>
              <li>
                <vab-icon icon="email" />
                {{ user.email }}
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="16" :md="12" :sm="24" :xl="16" :xs="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>基本资料</span>
          </div>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
              <userInfo :user="user" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import userAvatar from './userAvatar'
  import userInfo from './userInfo'
  import resetPwd from './resetPwd'
  import { getUserProfile } from '@/api/system/user'

  export default {
    name: 'Profile',
    components: { userAvatar, userInfo, resetPwd },
    data() {
      return {
        user: {},
        roleGroup: {},
        postGroup: {},
        activeTab: 'userinfo',
      }
    },
    created() {
      this.getUser()
    },
    methods: {
      getUser() {
        getUserProfile().then((response) => {
          this.user = response.data
          this.roleGroup = response.roleGroup
          this.postGroup = response.postGroup
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  $base: '.personal-center';
  #{$base}-container {
    padding: 0 !important;
    background: $base-color-background !important;

    #{$base}-user-info {
      text-align: center;

      ::v-deep {
        .el-avatar {
          img {
            cursor: pointer;
          }
        }
      }

      &-full-name {
        margin-top: 15px;
        font-size: 24px;
        font-weight: 500;
        color: #262626;
      }

      &-description {
        margin-top: 8px;
      }

      &-list {
        margin-top: 30px;
        line-height: 30px;
        text-align: left;
        list-style: none;

        h5 {
          margin: -20px 0 5px 0;
        }

        ::v-deep {
          .el-tag {
            margin-right: 10px !important;
          }

          .el-tag + .el-tag {
            margin-left: 0;
          }
        }
      }
    }

    #{$base}-item {
      display: flex;

      i {
        font-size: 40px;
      }

      &-content {
        box-sizing: border-box;
        flex: 1;
        margin-left: $base-margin;

        &-second {
          margin-top: 8px;
        }
      }
    }
  }
</style>
